<template>
  <div class="show-Notice-message">
    <el-dialog class="show-notice-dialog" width="60%" title="查看通知信息" :visible.sync="showNoticeSync" :before-close="handleCloseDialog">
      <el-card shadow="never" v-loading="loading">
        <h2 style="text-align: center">《{{this.noticeInfo.noticeTitle}}》</h2>
            <div class="ql-editor">
              <p v-html="this.noticeInfo.noticeContent"></p>
            </div>
        <div class="fr" style="float: right;bottom: 20px">
          <p>创建人:{{this.noticeInfo.createUserName}}</p>
          <p>创建时间：{{this.noticeInfo.createTime}}</p>
        </div>
      </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import store from '@/store'
import { GetNoticeByIdApi } from '@/request/message/notice-api'
export default {
  computed: {
    listenShowNoticeId () {
      return store.state.NoticeEdit.showNoticeId
    },
    ...mapState({
      showNoticeSync: state => state.NoticeEdit.showNoticeSync,
      showNoticeId: state => state.NoticeEdit.showNoticeId
    })
  },
  data () {
    return {
      loading:false,
      noticeInfo: {
        noticeTitle: 'error',
        noticeContent: '<p>error</p></p>',
        createUserName:'error',
        createTime:'error'
      }
    }
  },
  methods: {
    close(){
      store.commit('NoticeEdit/changeShowNoticeSync',false)
      store.commit('NoticeEdit/changeShowNoticeId',null)
      this.noticeInfo={
        noticeTitle: '',
        noticeContent: '<p></p>',
        createUserName:'',
        createTime:''
      }
    },
    handleCloseDialog () {
      this.$confirm('确定取消查看通知信息吗？', '提示', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
        'type': 'info'
      }).then(async () => {
        this.close()
      }).catch((e) => {
        if (e === 'cancel') {
        }
      })
    },
    async initNoticeInfo (id) {
      this.loading=true
      let res = await GetNoticeByIdApi(id)
      if (res&&res.code===200){
        this.noticeInfo=res.data
      }else {
        this.$message.error(res.msg?res.msg:"获取通知信息失败")
        this.noticeInfo={
          noticeTitle: 'error',
          noticeContent: '<p>error</p></p>',
          createUserName:'error',
          createTime:'error'
        }
      }
      this.loading=false
    }
  },
  watch: {
    listenShowNoticeId: {
      immediate: true,
      handler (val, old) {
        if (val) {
         this.initNoticeInfo(val)
        }
      }
    }
  }
}
</script>
<style scoped lang="less">
.show-Notice-message{
  /deep/ .show-notice-dialog .el-card{
    width: 80%;
    margin: 0 auto;
    height: 500px!important;
    overflow-y: scroll;
  }

}
/deep/ .el-dialog {
  border-radius: 10px;
}
.el-card{
  margin-bottom: 20px;
}
</style>
